.container {
  background: var(--color-background);
  min-height: calc(100vh - var(--push-height));
  overflow-y: auto;
  width: 520px;
}

@media screen and (max-width: 1023px) {
  .container {
    min-height: calc(100dvh - var(--push-height));
  }
}

.container::-webkit-scrollbar {
  width: 0.5rem;
}

.container::-webkit-scrollbar-track {
  background: transparent;
}

.container::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 0.25rem;
}

.container::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-300);
}

.container.expanded {
  margin: 0 auto;
  max-width: 52rem;
  width: 100%;
}

.thread {
  background: var(--color-background);
}

.info {
  box-sizing: border-box;
  clear: both;
  min-height: 20px;
  display: flex;
  padding: 1rem;
  padding-top: 2rem;
  gap: 0.5rem;
  justify-content: space-between;
}

.info + .info {
  padding-top: 0;
}

.footer {
  display: flex;
  justify-content: center;
}

.footer > a {
  width: auto;
}

.container.expanded .info {
  padding-bottom: 1rem;
}

.chat {
  background: var(--color-background);
  border-top: 1px solid var(--color-border);
  bottom: 0;
  padding: 1rem 1rem 1.5rem 1rem;
  position: sticky;
  width: 100%;
}

.container.expanded .chat {
  border-top: none;
  padding-top: 0;
}

@media (max-width: 1023px) {
  .container {
    min-width: 312px;
    width: 100%;
    max-width: 100%;
  }

  .info {
    min-width: 100%;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .chat {
    padding: 0;
    border: none;

    textarea {
      background: var(--color-gray-50);
      border-left: none;
      border-right: none;
      border-radius: 0;

      @media (prefers-color-scheme: dark) {
        background: var(--color-gray-100);
      }
    }
  }
}

@media (min-width: 768px) {
  .info {
    min-width: 360px;
  }
}

.count {
  font-size: 14px;
}

.badge {
  align-items: center;
  justify-content: flex-start;
  display: flex;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--color-gray-500);
  font-weight: 500;
  letter-spacing: 1.3px;
  overflow: hidden;
  user-select: none;
}

.badge .text {
  background: var(--color-background);
  color: var(--color-gray-400);
  padding: 0.125rem 0.375rem 0.125rem 0.5rem;
  transition: color 0.2s ease;
}

.badge a.text:hover {
  color: var(--color-primary);
}

.badge .count {
  align-items: center;
  display: flex;
  font-size: 10px;
  padding: 0.125rem 0.375rem;
  justify-content: center;
  white-space: nowrap;
}

.title {
  font-weight: bold;
  padding-bottom: 1rem;
}

.link {
  align-items: center;
  color: var(--color-indigo-700);
  cursor: pointer;
  display: flex;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-weight: 500;
  padding: 0 0.375rem;
}

.link:hover {
  text-decoration: underline;
}
